﻿
<!DOCTYPE html>
<html>
<head>
    <title>Open Diagram</title>
    <link rel="stylesheet" type="text/css" href="~/Content/mxGraph/styles/grapheditor.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript">
        // Reads files locally
        function handleFiles(files) {
            for (var i = 0; i < files.length; i++) {
                (function (file) {
                    // Small hack to support import
                    if (window.parent.openNew) {
                        window.parent.open(window.parent.location.href);
                    }

                    var reader = new FileReader();
                    reader.onload = function (e) {
                       
                        window.parent.openFile.setData(e.target.result, file.name);
                    };
                    reader.onerror = function (e) {
                        console.log(e);
                    };
                    reader.readAsText(file);
                })(files[i]);
            }
        };

        // Handles form-submit by preparing to process response
        function handleSubmit() {
            var form = window.openForm || document.getElementById('openForm');
            debugger;
            // Checks for support of the File API for local file access
            // except for files where the parse is on the server
            if (window.parent.Graph.fileSupport && form.upfile.files.length > 0) {
                handleFiles(form.upfile.files);

                return false;
            }
            else {
                if (/(\.xml)$/i.test(form.upfile.value) || /(\.txt)$/i.test(form.upfile.value) ||
                    /(\.mxe)$/i.test(form.upfile.value)) {
                    // Small hack to support import
                    if (window.parent.openNew) {
                        window.parent.open(window.parent.location.href);
                    }

                    // NOTE: File is loaded via JS injection into the iframe, which in turn sets the
                    // file contents in the parent window. The new window asks its opener if any file
                    // contents are available or waits for the contents to become available.
                    return true;
                }
                else {
                    window.parent.mxUtils.alert(window.parent.mxResources.get('invalidOrMissingFile'));

                    return false;
                }
            }
        };

        // Hides this dialog
        function hideWindow(cancel) {
            window.parent.openFile.cancel(cancel);
        }

        function fileChanged() {
            var form = window.openForm || document.getElementById('openForm');
            var openButton = document.getElementById('openButton');

            if (form.upfile.value.length > 0) {
                openButton.removeAttribute('disabled');
            }
            else {
                openButton.setAttribute('disabled', 'disabled');
            }
        }

        function main() {
            if (window.parent.Editor.useLocalStorage) {
                document.body.innerHTML = '';
                var div = document.createElement('div');
                div.style.fontFamily = 'Arial';

                if (localStorage.length == 0) {
                    window.parent.mxUtils.write(div, window.parent.mxResources.get('noFiles'));
                }
                else {
                    var keys = [];

                    for (var i = 0; i < localStorage.length; i++) {
                        keys.push(localStorage.key(i));
                    }

                    // Sorts the array by filename (key)
                    keys.sort(function (a, b) {
                        return a.toLowerCase().localeCompare(b.toLowerCase());
                    });

                    for (var i = 0; i < keys.length; i++) {
                        var link = document.createElement('a');
                        link.style.fontDecoration = 'none';
                        link.style.fontSize = '14pt';
                        var key = keys[i];
                        window.parent.mxUtils.write(link, key);
                        link.setAttribute('href', 'javascript:void(0);');
                        div.appendChild(link);

                        var img = document.createElement('span');
                        img.className = 'geSprite geSprite-delete';
                        img.style.position = 'relative';
                        img.style.cursor = 'pointer';
                        img.style.display = 'inline-block';
                        div.appendChild(img);

                        window.parent.mxUtils.br(div);

                        window.parent.mxEvent.addListener(img, 'click', (function (k) {
                            return function () {
                                if (window.parent.mxUtils.confirm(window.parent.mxResources.get('delete') + ' "' + k + '"?')) {
                                    localStorage.removeItem(k);
                                    window.location.reload();
                                }
                            };
                        })(key));

                        window.parent.mxEvent.addListener(link, 'click', (function (k) {
                            return function () {
                                try {
                                    window.parent.open(window.parent.location.href);
                                    window.parent.openFile.setData(localStorage.getItem(k), k);
                                }
                                catch (e) {
                                    window.parent.mxUtils.alert(e.message);
                                }
                            };
                        })(key));
                    }
                }

                window.parent.mxUtils.br(div);
                window.parent.mxUtils.br(div);

                var cancelBtn = window.parent.mxUtils.button(window.parent.mxResources.get('cancel'), function () {
                    hideWindow(true);
                });
                cancelBtn.className = 'geBtn';
                div.appendChild(cancelBtn);

                document.body.appendChild(div);
            }
            else {
                var editLink = document.getElementById('editLink');
                var openButton = document.getElementById('openButton');
                openButton.value = window.parent.mxResources.get(window.parent.openKey || 'open');
                var cancelButton = document.getElementById('cancelButton');
                cancelButton.value = window.parent.mxResources.get('cancel');
                var supportedText = document.getElementById('openSupported');
                supportedText.innerHTML = window.parent.mxResources.get('openSupported');
                var form = window.openForm || document.getElementById('openForm');

                form.setAttribute('action', window.parent.OPEN_URL);
            }
        };
    </script>
</head>
<body onload="main();">
    <form method="POST" enctype="multipart/form-data" action="" name="openForm"
          id="openForm" onsubmit="return handleSubmit();" accept-charset="UTF-8">
        <table style="width:100%;">
            <tr>
                <td style="height:40px;vertical-align:top;" colspan="2">
                    <input type="file" name="upfile" onchange="fileChanged()"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" height="120px" id="openSupported" style="font-family:arial;color:grey;font-size:9pt;vertical-align:top;text-align:left;"></td>
            </tr>
            <tr>
                <td></td>
                <td style="vertical-align:middle;text-align:right;white-space:nowrap;">
                    <input type="button" id="cancelButton" class="geBtn" value="Cancel" onclick="hideWindow(true);"/>
                    <input type="submit" id="openButton" class="geBtn gePrimaryBtn" value="Open" disabled="disabled"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

